<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乌鲁木齐区域图</title>
    <!-- 引入jquery文件 -->
    <script src="../js/jquery-3.1.1.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="../js/echarts.js"></script>
</head>
<body>

<div id="map" style="width: 800px;height:600px;"></div>

<script>
    var chart = echarts.init(document.getElementById('map'));

    $.getJSON('../data/wlmq.json', function (data) {
        echarts.registerMap('乌鲁木齐', data);
        var chart = echarts.init(document.getElementById('map'));
        chart.setOption({
            color: ['#ff7f50','#32cd32','#6495ed'],
            tooltip : {
                trigger: 'item',
                formatter: '{b}'
            },
            series : [
                {
                    map: '乌鲁木齐',
                    name: '喀什',
                    type: 'map',
                    mapType: '乌鲁木齐',
                    roam: true,
                    hoverable: false,
                    data:[],
                    markLine : {
                        itemStyle : {
                            normal: {
                                borderWidth:1
                            }
                        },
                        data : [
                            [{name:'喀什'},{name:'乌鲁木齐'}]
                        ]
                    },
                    geoCoord: {
                        '乌鲁木齐': [87.9236,43.5883],
                        '喀什': [75.9951,39.474191]
                    }
                }
            ]
        });
    });
</script>
</body>
</html>